<template>
	<div class="user_box" :style='{height:view_height}'>
		<div class="user_head">
			<router-link :to="{path:'/clips'}" class="user_back"><img src="../../../static/images/4/f-1.png" alt="" /></router-link>
			<img class="user_logo" src="../../../static/images/4/login_logo.png" />
			<div class="user_tip">忘记密码</div>
			<img class="user_tip_line" src="../../../static/images/8/forget_pwd_short_line.png"/>
		</div>	
		
		<div class="user_cont">
			<label class="user_cont_icon" for=""><img src="../../../static/images/4/login_phone_icon.png"/></label>
			<input class="user_cont_info" type="text" placeholder="请输入手机号" @focus="phone_focus" @blur="phone_blur"/>	
			<img class="user_cont_line" src="../../../static/images/4/login_long_line.png"/>
			<img class="user_cont_clear" v-show="clear1" src="../../../static/images/4/login_clear_btn_pressed.png"/>			
		</div>
		
		<div class="user_check">
			<label class="user_check_icon" for=""><img src="../../../static/images/7/certify_input_code_icon.png"/></label>
			<input class="user_check_info" type="text" placeholder="请输入验证码" @focus="phone_focus" @blur="phone_blur"/>	
			<img class="user_check_line" src="../../../static/images/7/certify_short_line.png"/>
			<div class="user_check_get">获取验证码</div>
		</div>

		<div class="user_cont">
			<label class="user_cont_icon" for=""><img src="../../../static/images/4/login_pwd_icon.png"/></label>
			<input  class="user_cont_info" type="password" placeholder="请设置新密码"  @focus="pwd_focus" @blur="pwd_blur"/>					
			<img  class="user_cont_line" src="../../../static/images/4/login_long_line.png"/>
			<img class="user_cont_clear" v-show="clear2" src="../../../static/images/4/login_clear_btn_pressed.png"/>
		</div>
		
		<div class="user_cont">
			<label class="user_cont_icon" for=""><img src="../../../static/images/4/login_pwd_icon.png"/></label>
			<input  class="user_cont_info" type="password" placeholder="再次输入新密码"  @focus="pwd_focus" @blur="pwd_blur"/>					
			<img  class="user_cont_line" src="../../../static/images/4/login_long_line.png"/>
			<img class="user_cont_clear" v-show="clear2" src="../../../static/images/4/login_clear_btn_pressed.png"/>
		</div>
			
		<div class="user_foot"><router-link :to="{path:'/login'}"  class="user_foot_login">提交</router-link></div>	
	</div>
</template>

<script>
	export default {
		name:"login_forget",
		data(){
			return {
				view_height:document.documentElement.clientHeight+'px'
			}
		},
		methods:{
			
			
		}
	}
</script>

<style scoped lang='less'>	
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {
margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
body { line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
a{color: inherit;text-decoration: none;}
body {background: #f0f2f5;font-family: "Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei UI","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;font-size: 25/64rem;color: #444;}
.user_box {
    width: 100%;
    /*display: flex;flex-flow: column;align-items: center;*/
    background: url("../../../static/images/4/login_bg.png") no-repeat;
    background-size:100% 100%;
}
.user_head{
	width: 100%;height:(150+143+100+44)/64rem;
	display: flex;flex-flow: column;align-items: center;
	position:relative;
	.user_back {
		/*margin:30/64rem 0 0 40/64rem;*/
		position: absolute;left:40/64rem;top:30/64rem;
		img{
			width:21/64rem;height:37/64rem;
		}
	}
	.user_logo{
		width:278/64rem;height:143/64rem;
		margin:150/64rem auto 0;
	}
	.user_tip{
		width: 100%;height:30/64rem;
		font-size: 30/64rem;text-align: center;color:#c0adcd;
		margin:60/64rem auto 0;
	}
	.user_tip_line{
		width:133/64rem;height:5/64rem;
		margin:10/64rem auto 0;
	}
}
.user_cont{
	width: 493/64rem;height:100/64rem;
	margin:2/64rem auto;
	display: flex;flex-flow: column;align-items: center;
	position:relative;
	.user_cont_icon{
		position: absolute;left:20/64rem;bottom:20/64rem;
		img{
			width:26/64rem;height:37/64rem;margin-bottom:-5/64rem;
		}
	}
	.user_cont_info{
		width:100%;height:37/64rem;
		font-size: 28/64rem;text-align:center;line-height: 28/64rem;color:#EBD5FB;
		position: absolute;left:0;bottom:20/64rem;
		outline: none;border: 0 none;background: transparent;
	}
	.user_cont_line{
		width:100%;
		position: absolute;left:0;bottom:1/64rem;
	}
	.user_cont_clear{
		width:58/64rem;height:50/64rem;
		position: absolute;right:-45/64rem;bottom:20/64rem;
	}	
}

.user_sent{
	width: 493/64rem;height:100/64rem;
	margin:0 auto;
	display: flex;flex-flow: column;align-items: center;
	.user_sent_tip {
		width: 100%;height:24/64rem;
		font-size: 24/64rem; text-align: center;color:#c0adcd;
		margin:(60 - 44)/64rem auto 0;
	}
	.user_sent_info{
		width:100%;height:37/64rem;
		outline: none;border: 0 none;background: transparent;
		font-size: 36/64rem; text-align:center;line-height: 28/64rem;color:#fff;
		margin:(80 - 14 - 36)/64rem auto 0;

	}
	.user_sent_line{
		width:360/64rem;
		margin:14/64rem auto 0;
	}
	
}
.user_check{
	width: 493/64rem;height:100/64rem;
	margin:20/64rem auto 0;
	display: flex;flex-flow: column;align-items: center;
	position:relative;
	.user_check_icon{
		position: absolute;left:10/64rem;bottom:20/64rem;
		img{
			width:26/64rem;height:37/64rem;margin-bottom:-5/64rem;
		}
	}
	.user_check_info{
		width:300/64rem;height:37/64rem;
		outline: none;border: 0 none;background: transparent;
		font-size: 28/64rem; text-align:center;line-height: 28/64rem;color:#fff;
		position: absolute;left:0;bottom:20/64rem;	
	}
	.user_check_get{
		width:200/64rem;height:60/64rem;
		background: url("../../../static/images/7/certify_get_code_normal.png") no-repeat;
		background-size:100%;
		font-size: 28/64rem; text-align:center;line-height: 60/64rem;color:#fff;
		position: absolute;right:0;bottom:0;
	}
	.user_check_line{
		width:260/64rem;	
		position: absolute;left:0;bottom:0;
	}	
}
.user_foot{
	width: 493/64rem;
	margin:0 auto;
	display: flex;flex-flow: column;align-items: center;
	.user_foot_login{
		width: 493/64rem;height:83/64rem;
		font-size: 28/64rem;text-align:center;line-height: 83/64rem;color:#fff;		
		background: url("../../../static/images/4/login_btn_pressed.png") no-repeat;
		background-size:100% 100%;
		margin:60/64rem auto 0;
	}
	.user_foot_forget{
		width: 493/64rem;height:30/64rem;
		font-size: 24/64rem;text-align:center;line-height: 30/64rem;color:#937F9C;
		margin:60/64rem auto 0;
	}	
}
.user_register{
		width: 100%;height:30/64rem;
		font-size: 24/64rem;text-align:center;line-height: 30/64rem;color:#937F9C;
		position: absolute;bottom:46/64rem;
		span{color:#CEBED5;}
}
.user_loading{
	width: 100%;;height:170/64rem;
	display: flex;flex-flow: column;align-items: center;
	position: absolute;top:50%-85/64rem;	
	img{width: 170/64rem;height:170/64rem;}
}
</style>